const HtmlWebpackPlugin = require('html-webpack-plugin')
// HtmlWebpackPlugin  打包过后自动生成html结构

module.exports = {
    entry: "./src/index.js",
    output: {
        path: __dirname + "/dist",
        filename: "main.js"
    },
    mode: "development",
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            },
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            },
            {//js 解析
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/
            },
        ]
    },
    // 插件
    plugins: [
        // 所有插件都需要实例
        new HtmlWebpackPlugin({
            // 依赖的模板
            template: "./public/index.html"
        })
    ],
    // 服务
    devServer: {
        port: 8089,
        // 开启热更新
        // hot: true
        // 自动打开
        open: true
    }
}